<template>
  <div>
    <el-row type="flex" align="top" justify="space-between">
      <!-- 表单 -->
      <el-col :span="1">
        <el-button type="primary" @click="dialogVisible = true;resetForm();">+新增订单</el-button>
        <el-dialog title="新增订单" :visible.sync="dialogVisible" width="30%">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="订单号：" prop="orderNum">
              <el-input v-model="ruleForm.orderNum" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="创建日期：" required>
              <el-col :span="12">
                <el-form-item prop="date">
                  <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="ruleForm.date"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="客户姓名：" prop="orderName">
              <el-input v-model="ruleForm.orderName" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="orderPho">
              <el-input v-model="ruleForm.orderPho" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="订单状态：" prop="orderState">
              <el-radio-group v-model="ruleForm.orderState">
                <el-radio label="未发货"></el-radio>
                <el-radio label="已发货"></el-radio>
                <el-radio label="已签收"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="详情：" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer btnS">
            <el-button @click="dialogVisible = false;resetForm()">取 消</el-button>
            <el-button class="sureBtn" type="primary" @click="handleAdd('ruleForm')">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
      <!-- 搜索框 -->
      <el-col :span="6">
        <div class="search">
          <el-input class="searchInput" v-model="searchData" placeholder="请输入客户姓名"></el-input>
          <el-button type="primary" @click="handleSearch()" class="el-icon-search searchBtn"></el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-row>
      <div class="tableBox">
        <el-table border :data="tableData" style="width: 100%" height='250' @sort-change="sortChange" @filter-change="filterChange" :default-sort="{prop: 'date',order: 'descending'}">
          <el-table-column prop="orderNum" label="订单号" width="150px" align="center">
          </el-table-column>
          <el-table-column prop="date" sortable="custom" label="创建日期" width="150px" align="center">
          </el-table-column>
          <el-table-column prop="orderName" label="客户姓名" width="120px" align="center">
          </el-table-column>
          <el-table-column prop="orderPho" label="联系电话" width="200px" align="center">
          </el-table-column>
          <el-table-column prop="orderState" label="订单状态 " width="120px" align="center" :filters="filtersData" :filter-multiple="false" column-key="state">
          </el-table-column>
          <el-table-column prop="desc" label="详情">
          </el-table-column>
          <el-table-column label="操作" width="165px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="changePage" background layout="prev, pager, next" :page-size="12" :total="newList.length" class="paginationBox">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import { deleteOrderData, editOrderData, addOrderData, getOrderData, searchOrderData, changeSort, } from '../../api/data';
export default {
  name: 'User',
  data() {
    return {
      //新增按钮弹窗数据
      dialogVisible: false,
      //表单数据
      ruleForm: {
        type: '',
        id: '',
        orderNum: '',
        orderName: '',
        orderPho: '',
        date: '',
        orderState: '',
        desc: ''
      },
      //表单验证规则
      rules: {
        orderNum: [
          { required: true, message: '请输入订单号', trigger: 'change' },
          { len: 7, message: '请输入7位数订单号', trigger: 'change' },
        ],
        orderName: [
          { required: true, message: '请输入客户姓名', trigger: 'change' }
        ],
        orderPho: [
          { required: true, message: '请输入客户联系电话', trigger: 'change' },
          { pattern: /^(\d{3})-(\d{4})-(\d{4})$/, message: '请输入xxx-xxxx-xxxx格式电话号码', trigger: 'change' }
        ],
        date: [
          { required: true, message: '请选择年/月/日', trigger: 'change' }
        ],
        orderState: [
          { required: true, message: '请选择订单状态', trigger: 'change' }
        ],
      },
      //搜索框数据
      searchData: '',
      //列表原始数据
      List: [],
      //列表被处理后的数据
      newList:[],
      //分页功能索引值
      index: 1,
      //筛选功能数据
      filtersData:[{
        text:'未发货',
        value:'未发货'
      },{
        text:'已发货',
        value:'已发货'
      },{
        text:'已签收',
        value:'已签收'
      }],
    };
  },
  computed: {
    //分页功能
    tableData() {
      return this.newList.slice((this.index - 1) * 12, (this.index - 1) * 12 + 12)
    }
  },
  methods: {
    //重置表单
    resetForm() {
      this.ruleForm.type = '';
      this.ruleForm.id = '';
      this.ruleForm.orderNum = '';
      this.ruleForm.orderName = '';
      this.ruleForm.orderPho = '';
      this.ruleForm.date = '';
      this.ruleForm.orderState = '';
      this.ruleForm.desc = '';
    },
    //添加订单
    handleAdd(formName) {
      //表单验证成功之后再发送请求
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //关闭表单
          this.dialogVisible = false;
          //判断ruleForm的type属性，是需要添加，还是需要编辑
          if (this.ruleForm.type === 'edit') {
            //编辑功能
            editOrderData(this.ruleForm).then((res) => {
              // //重置表单
              // this.resetForm();
              //更新列表
              this.List = res.data;
              this.newList = res.data;
            })
          } else {
            //添加功能
            addOrderData(this.ruleForm).then((res) => {
              //重置表单
              this.resetForm();
              //更新列表
              this.List = res.data;
              this.newList = res.data;
            })
          }
        }
      })
    },
    //编辑订单
    handleEdit(row) {
      //把当前行的数据传递给表单 并且设置模式为编辑模式
      this.ruleForm = {
        type: 'edit',
        id: row.id,
        orderNum: row.orderNum.toString(),
        orderName: row.orderName,
        orderPho: row.orderPho,
        date: row.date,
        orderState: row.orderState,
        desc: row.desc,
      },
        //弹出表单
        this.dialogVisible = true;
    },
    //删除订单
    handleDelete(row) {
      this.$confirm('删掉就没有了哦!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrderData(row).then((res) => {
          this.List = res.data;
          this.newList = res.data;
        })
      })
    },
    //搜索功能
    handleSearch() {
      searchOrderData(this.searchData).then((res) => {
        this.List = res.data;
        this.newList = res.data;
        this.index = 1;
      })
    },
    //分页功能
    changePage(page) {
      this.index = page
    },
    //日期排序
    sortChange(config) {
      const order = config.order;
      changeSort(order).then((res) => {
        this.List = res.data;
        this.newList = res.data;
      })
    },
    //筛选功能
    filterChange(condition){
      if(condition.state[0]){
        this.newList = this.List.filter((item)=>{
          return item.orderState == condition.state[0]
        })
        //判断如果 上次分页总页数 大于 当前总页数 就自动跳到 当前页数 的最后一页
        if(this.index>Math.ceil(this.newList.length/12)){
          this.index = Math.ceil(this.newList.length/12);
          this.index = this.index==0 ? 1 : this.index;
        }
      }else{
        this.newList = this.List; 
      }
    },
  },
  mounted() {
    //挂载完渲染列表
    getOrderData().then(res => {
      this.List = res.data;
      this.newList = res.data;
    })
  },
}
</script>

<style lang="less" scoped>
.el-col {
  line-height: 0px !important;
}

.addOrder {
  line-height: 0px !important;
}

.btnS {
  display: flex;
  justify-content: center;

  .sureBtn {
    margin-left: 50px;
  }
}

.search {
  display: flex;

  .searchBtn {
    height: 40px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    margin-left: -2px;
    z-index: 5;
  }
}

.tableBox {
  display: flex;
  flex-direction: column;
  height: 648px;
  width: 100%;
  margin-top: 20px;
  line-height: 0px !important;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
}

.paginationBox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
</style>
<style>
.el-table th.el-table__cell>.cell.highlight{
  color: #909399 ;
}
.el-table-filter .is-active{
  color: #000 !important;
  background-color: rgb(255,255,255) !important;
}
.el-table-filter__list-item{
  color: #000 ;
  background-color: rgb(255,255,255) ;
  }
.el-table-filter__list-item:hover{
  color: #66b1ff ;
  background-color: #ecf5ff ;
}
</style>